<template>
	<view>
		<div class="playlist-info-wrap">
			<div class="base-info">
				<image class="coverImage" :src="playlistInfo.coverImgUrl" mode=""></image>
				<div class="playCount">
					<span class="icon iconfont">&#xe600;</span>
					<span>{{playlistInfo.playCount | transfromNumer}}</span>
				</div>
				<span class="name">{{playlistInfo.name}}</span>
				<div class="creator-avatar">
					<img class="avatar" :src="creator.avatarUrl" alt="">
					<span class="nickname">{{creator.nickname}}</span>
				</div>
				<span class="des">{{playlistInfo.description}}</span>
			</div>
		</div>
		<music-list :musicArrayData="songList">
			<span slot="title"></span>
		</music-list>
		<comment :comment="comment"></comment>
	</view>
</template>

<script>
	import musicList from "../../components/music-list.vue"
	import comment from "../../components/comment.vue"
	import {
		mixinTransformNumerFilter
	} from "../../utils/mixins.js"
	export default {
		data() {
			return {
				playlistInfo: {},
				creator: {},
				songList: [],
				comment:{},
			}
		},
		components: {
			musicList,
			comment
		},
		mixins: [mixinTransformNumerFilter], //混入filter
		methods: {
			async getSongListDetails() {
				const res = await this.rq.fetchGet(this.apiUrl.songListDetails, {
					id: this.options.id
				})
				this.songList = res[1].data.playlist.tracks.map(item => {
					return {
						id: item.id,
						name: item.name,
						song: {
							exclusive: item.h,
							artists: item.ar,
							album: item.al
						}
					}
				})
				this.playlistInfo = res[1].data.playlist;
				this.creator = res[1].data.playlist.creator
				uni.setStorage({
					key: "activeSongList",
					data: JSON.stringify(this.songList)
				})
			},
			async getAlbumDetails() {
				const res =await this.rq.fetchGet(this.apiUrl.playlistComment,{id: this.options.id})
				this.comment = res[1].data
			}
		},
		onLoad() {
			this.getSongListDetails()
			this.getAlbumDetails()
		}
	}
</script>

<style lang="scss">
	.playlist-info-wrap {
		background-color: #DD514D;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 20px 0px;

		.base-info {
			width: 90%;

			.coverImage {
				float: left;
				width: 8rem;
				height: 8rem;
				border-radius: 12px;
				vertical-align: middle;
				margin-right: 1rem;
				position: relative;
			}

			.playCount {
				//总播放量
				position: absolute;
				font-size: .8rem;

				.icon {
					font-size: .8rem;
				}
			}

			.creator-avatar {
				text-align: center;
				margin: 10px 0px;

				.nickname {
					font-size: .6rem;
					vertical-align: middle;
				}
			}

			.name {
				font-size: .8rem;
			}

			.avatar {
				width: 2rem;
				border-radius: 50%;
				vertical-align: middle;
			}

			.des {
				color: #87ffb5;
				font-size: .6rem;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>
